<template>
    <div>
        <el-button type="primary" size="default" @click="showDialog">显示</el-button>
        <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="close">
            <span>这是一段信息</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="close">取 消</el-button>
                <el-button type="primary" @click="confirm">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                dialogVisible:false
            }
        },
        methods:{
            showDialog(){
                this.dialogVisible = true;
            },
            close(){
                this.dialogVisible = false;
            },
            confirm(){
                this.dialogVisible = true;
            }
        }
    }
</script>

<style lang="scss" scoped>

</style>